let isTouching = false;
export default class extends Phaser.State{
    constructor () {
        super()
        this.CITY = [
            {name:'北京',x:130,y:280,id: 1},
            {name:'安徽',x:220,y:145,id: 2},
            {name:'澳门',x:410,y:200,id: 3},
            {name:'福建',x:410,y:380,id: 4},
            {name:'重庆',x:600,y:380,id: 5},
            {name:'甘肃',x:615,y:530,id: 6},
            {name:'海南',x:615,y:650,id: 7},
            {name:'贵州',x:425,y:650,id: 8},
            {name:'黑龙江',x:425,y:800,id: 9},
            {name:'河南',x:360,y:940,id: 10},
            {name:'湖北',x:190,y:1000,id: 11},
            {name:'江苏',x:190,y:1170,id: 12},
            {name:'湖南',x:380,y:1170,id: 13},
            {name:'江西',x:550,y:1170,id: 14},
            {name:'吉林',x:620,y:1300,id: 15},
            {name:'宁夏',x:530,y:1440,id: 16},
            {name:'辽宁',x:350,y:1440,id: 17},
            {name:'内蒙古',x:130,y:1440,id: 18},
            {name:'陕西',x:110,y:1620,id: 19},
            {name:'青海',x:310,y:1620,id: 20},
            {name:'山东',x:490,y:1620,id: 21},
            {name:'天津',x:490,y:1790,id: 22},
            {name:'上海',x:320,y:1790,id: 23},
            {name:'山西',x:120,y:1790,id: 24},
            {name:'四川',x:12,y:1950,id: 25},
            {name:'香港',x:40,y:2100,id: 26},
            {name:'西藏',x:200,y:2150,id: 27},
            {name:'云南',x:380,y:2260,id: 28},
            {name:'浙江',x:490,y:2140,id: 29},
            {name:'新疆',x:487,y:2000,id: 30},
            {name:'台湾',x:625,y:2000,id: 31},
            {name:'广东',x:12,y:530,id: 32},
            {name:'广西',x:60,y:745,id: 33},
            {name:'河北',x:230,y:745,id: 34}
        ]
    }
    preload() {
        this.load.image('bg', 'assets/map_bg.png');
        this.load.image('map_btn', 'assets/map_btn.png');
        this.load.image('container', 'assets/map_container.png');
        this.load.image('mask', 'assets/map_mask.png');
    }
    init() {
        game.world.resize(750, 2578);
    }
    create() {
        var bg = this.add.image(0, 0,'bg')
        bg.scale.set(1.17,1.17)
        this.judgeTouchDirection()
        
        // 卡片
        var style = { font: '28pt arial', fill: 'white'};
        for(let i =0;i<this.CITY.length; i++){
            var container = game.add.group();
            this['box' + i] = container.create(this.CITY[i].x - 8,this.CITY[i].y - 30,'container')
            this['box' + i].inputEnabled = true
            this['box' + i].events.onInputDown.add( () => {
                setTimeout(_=>{
                    if(!isTouching){
                        for(let i =0;i<this.CITY.length; i++){
                            this['box' + i].loadTexture('container');
                        }
                        this['box' + i].loadTexture('mask');
                        localStorage.setItem('cityId', this.CITY[i].id) 
                    }
                },100)
            }, this )
            var text = game.add.text(this.CITY[i].x + (this.CITY[i].name.length === 3 ? 8 : 25),this.CITY[i].y + 45, this.CITY[i].name, style); 
        }
        // 按钮
        var playtBtn = this.add.image(window.gameWidth / 2, 2480, 'map_btn');
        playtBtn.anchor.setTo( .5, .5 )
        playtBtn.inputEnabled = true
        playtBtn.events.onInputDown.add( () => {
            let  myCanvas = document.getElementsByTagName('canvas')[0];
            // 接绑canvas事件
            myCanvas.ontouchmove = null;
            myCanvas.ontouchmove = null;
            myCanvas.ontouchend = null;
            if(localStorage.getItem('hasPlay')){
                game.state.start('play')
            }else{
                game.state.start('guide')
            }
        }, playtBtn )
    }
    judgeTouchDirection() {
        // canvas事件
        let  myCanvas = document.getElementsByTagName('canvas')[0];
        let  startY
        myCanvas.ontouchstart = function(event){
            startY = event.targetTouches[0].pageY;
        }
        myCanvas.ontouchmove = function(event){
            if((startY - event.targetTouches[0].pageY) > 1) {
                game.camera.y += 48
            }else if((event.targetTouches[0].pageY - startY) > 1){
                game.camera.y -= 48
            }
            isTouching = true
        }
        myCanvas.ontouchend = function(event){
            isTouching = false
        }   
    }
}